@import "@/styles/theme.scss";
.HMfilterDropdown {
  flex-shrink: 0;
  width: 100%;
  height: 88px;
  position: fixed;
  z-index: 997;
  flex-wrap: nowrap;
  display: flex;
  flex-direction: row;
  top: var(--window-top);
  left: 0;

  view {
    display: flex;
    flex-wrap: nowrap;
  }
}

.region {
  flex: 1;
  height: 44px;
}

.nav {
  width: 100%;
  height: 88px;
  border-bottom: solid 1rpx #F2F2F2;
  z-index: 12;
  background-color: #ffffff;
  flex-direction: row;

  .first-menu {
    width: 100%;
    font-size: 28px;
    color: #333333;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: color .2s linear;

    .name {
      height: 40px;
      text-align: center;
      text-overflow: clip;
      overflow: hidden;
    }

    .iconfont {
      width: 26px;
      height: 26px;
      align-items: center;
      justify-content: center;
      transition: transform .2s linear, color .2s linear;
    }

    &.on {
      color: $primary-color;

      .iconfont {
        color: $primary-color;
      }
    }
  }
}

.sub-menu-class {
  width: 100%;
  position: absolute;
  left: 0;
  transform: translate3d(0, - 100%, 0);
  box-sizing: border-box;
  // max-height: 690px;
  background-color: #ffffff;
  z-index: 11;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
  overflow: hidden;
  flex-direction: row;
  transition: transform .15s linear;

  &.hide {
    display: none;
  }

  &.show {
    transform: translate3d(0, calc(89px), 0);
  }
}

.sub-menu-class.more {
  background-color: #F8F8FA;
  padding-top: 12px;
}

.sub-menu-list {
  box-sizing: border-box;
  width: 100%;
  height: 690px;
  flex-direction: column;

  .sub-menu {
    font-size: 30px;
    flex-direction: column;
    padding-right: 30px;

    >.menu-name {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      >.iconfont {
        display: none;
        font-size: 36px;
        color: $primary-color;
      }
    }
  }

  &.first {
    flex-shrink: 0;
    width: 180px;
    background-color: #F8F8FA;

    .sub-menu {
      padding-left: 60px;
      line-height: 88px;
      padding-right: 0;
      color: #333333;
      position: relative;

      &.on {
        background-color: #fff;
        color: $primary-color;

        &::after {
          position: absolute;
          z-index: 2;
          content: '';
          width: 6px;
          height: 48px;
          background: $primary-color;
          left: 0;
          top: 50%;
          transform: translate(0, -50%);
        }
      }

      &:last-child {
        padding-bottom: 12px;
      }
    }
  }

  &.alone {

    // max-height: calc(100vh);
    // height: calc(100vh);
    .sub-menu {
      line-height: 114px;
      padding-right: 0;

      &.on {
        color: $primary-color;
        background: rgba(255, 164, 9, 0.07);

        >.menu-name {
          text-align: center;
          // >.iconfont {
          //     display: block;
          // }
        }
      }

      >.menu-name {
        height: auto;
        line-height: 114px;
        display: block;
        text-align: center;

        .iconfont {
          display: none;
        }
      }
    }
  }

  &.not-first {
    background-color: #fff;

    .sub-menu {
      min-height: calc(88px - 1rpx);
      margin-left: 48px;

      >.menu-name {
        height: calc(88px - 1rpx);
        color: #333333;

        >.iconfont {
          display: none;
          font-size: 36px;
          color: $primary-color;
        }
      }

      &.on {
        color: $primary-color;
        >.menu-name {
          color: $primary-color;
          >.iconfont {
            display: none;
          }
        }
      }

      .more-sub-menu {
        // flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 18px;

        >text {
          width: 136px;
          height: 60px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          color: #333333;
          margin-bottom: 32px;
          margin-right: 40px;
          border: solid #D6D6D9 1PX;
          overflow: hidden;
          font-size: 26px;
          &:nth-child(3n) {
            margin-right: 0;
          }

          &.on {
            border-color: #f6c8ac;
            color: $primary-color;
          }

          .iconfont {
            color: #9b9b9b;
          }
        }
      }
    }
  }
}

.filter {
  width: 100%;
  height: 456px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .menu-box {
    width: 698rpx;
    height: 288px;

    .box {
      width: 100%;
      margin-top: 32px;
      flex-direction: column;

      .title {
        width: 100%;
        font-size: 30px;
        font-weight: 500;
        color: #333333;
        line-height: 42px;
      }

      .labels {
        flex-direction: row;
        flex-wrap: wrap;
        .on {
          border-color: $primary-color;
          background-color: $primary-color;
          color: #fff;
        }

        >view {
          padding: 0 26px;
          background-color:#F6F6FA;
          color: #333333;
          border-radius: 4px;
          height: 60px;
          margin-right: 33px;
          margin-top: 30px;
          font-size: 24px;
          align-items: center;
          min-width: 150px;
          &:last-child{
            margin-right: 0;
          }
        }
      }
    }
  }

  .btn-box {
    flex-shrink: 0;
    width: 698rpx;
    height: 150px;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;

    >view {
      align-items: center;
      justify-content: center;
    }

    .reset {
      padding: 0 45px;
      align-items: flex-end;
      color: $primary-color;
      background: url('') no-repeat top center;
      background-size: 44px 44px;
      height: 90px;
      border-width: 0;
      border-radius: 0;
      font-size: 26px;
      font-weight: 500;
      color: #333333;
    }

    .submit {
      border-width: 0;
      width: 520px;
      height: 96px;
      background: linear-gradient(295deg, #E4A149 0%, $primary-color 100%);
      border-radius: 10px;
      font-weight: 500;
      font-size: 32px;
      color: #fff;
    }
  }
}

.mask {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color .15s linear;

  &.show {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &.hide {
    display: none;
  }
}

/* 字体图标 */
@font-face {
  font-family: "HM-FD-font";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
}

.iconfont {
  font-family: "HM-FD-font" !important;
  font-size: 28px;
  font-style: normal;
  color: #333333;

  &.triangle {
    &:before {
      content: "\e65a";
    }
  }

  &.selected {
    &:before {
      content: "\e607";
    }
  }
}